<script setup lang="ts">
    import { ElMessageBox ,ElMessage } from 'element-plus';

import { useRouter } from 'vue-router';
const router = useRouter()

import { storeToRefs } from 'pinia'
import { useUserInfoStore } from '@/stores/userinfo';   //导入用户信息状态库
const userInfoStore = useUserInfoStore()
const { user } = storeToRefs(userInfoStore)

const quit = ()=>{


    user.value.phone = ''
        user.value.userId = ''
        user.value.password = ''
        user.value.gender = ''
        user.value.head = ''
        user.value.name = ''

    
    
    router.push('/login')
    return ElMessageBox.alert('成功退出账户')
}

</script>

<template>
    <div class="bigBox">
        <h1>我是设置页面</h1>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quas natus libero doloremque corrupti quam fugit optio, sit asperiores doloribus consequatur dolore ipsum autem, ducimus sunt neque incidunt suscipit ratione.</div>
        <button class="logOutBtn" @click="quit()" >退出登录</button>
    </div>
</template>

<style scoped>
.bigBox{
    width: 100%;
    height: 100%;
    position: relative;
    /* background-color: antiquewhite; */
}
.logOutBtn{
    width: 300px;
    height: 60px;
    background-color: #1488c6;
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}
</style>